<template>
  <div class="report-image" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
    <img
      v-if="config.src"
      :src="config.src"
      :alt="config.alt"
      style="max-width: 100%; max-height: 100%; object-fit: contain;"
    />
    <div v-else class="placeholder">
      <el-icon size="48" color="#c0c4cc"><Picture /></el-icon>
      <p>请设置图片地址</p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  config: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.placeholder {
  text-align: center;
  color: #c0c4cc;
}

.placeholder p {
  margin-top: 8px;
  font-size: 14px;
}
</style>
